<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>欢迎界面</title>
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../styles/common.css" />
    <!--    头像文件上传样式-->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
    <style>
        body{
            position: relative;
        }
        .app{
            margin-top: 110px;
            margin-left: 350px;


        }
    </style>
</head>

<body>
<div class="app" id="app">


    <div style="margin: 50px 0 0 -300px">

        <h2 style="margin: 0 0 0 0 "> 账号：{{purchaseInfo.data.username}}</h2>
        <h2 style="position:absolute;margin:-30px 0px 0px 400px"> 姓名：{{purchaseInfo.data.name}}</h2>
        <h2  style="position:absolute;margin:100px 0px 0px 400px"> 电话：{{purchaseInfo.data.phone}}</h2>
        <h2  style="position:absolute;margin-top:210px;"> 性别：{{purchaseInfo.data.sex}}</h2>
        <h2 style="position:absolute;margin-top:100px;"> 身份证：{{purchaseInfo.data.idNumber}}</h2>

        <img style="width: 250px;height: 250px;margin: -50px 0 0 700px" :src="imageUrl" class="avatar">

    </div>
</div>



<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>
<!--<script src="../../js/request.js"></script>-->


<script>

    new Vue({
        el: '#app',
        data:{

            purchaseInfo:'',
            sex:'1',
            rules: {
                username: [
                    { required: true, message: '请输入username', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入name', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入phone', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                idNumber: [
                    { required: true, message: '请输入id_number', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            }
        },
        created() {
            const purchaseInfo = window.localStorage.getItem('purchaseInfo')
            console.log("adminInfo1:::"+purchaseInfo)
            if (purchaseInfo) {
                this.purchaseInfo = JSON.parse(purchaseInfo)
            }
            console.log("purchaseInfo:::"+purchaseInfo)

            this.imageUrl=`/photos/download?name=${ this.purchaseInfo.data.image}`

        },

        methods: {

        }
    })
</script>
</body>
</html>
